<template>
  <card class="insure-card" title="车辆信息">
    <car-info-block :carInfo="carInfo" :fieldList="fieldList" :tags="[record.statusName]" />
  </card>
  <a-descriptions :size="size" :align="{ label: 'right' }">
    <a-descriptions-item label="借调类型">{{ record.typeName }}</a-descriptions-item>
    <a-descriptions-item label="关联订单号">{{ record.refCode }}</a-descriptions-item>
    <a-descriptions-item label="借调周期">{{ record.startTime }} - {{ record.endTime }}</a-descriptions-item>
    <a-descriptions-item label="租期">{{ record.rentDays }}</a-descriptions-item>
    <a-descriptions-item label="借调费" v-if="record.type == 0">{{ record.amount ?? '-' }}元</a-descriptions-item>
    <a-descriptions-item label="收款账号">
      {{ record.contractCarPurchaseEditVo && record.contractCarPurchaseEditVo.receiveAccount }}
    </a-descriptions-item>
    <a-descriptions-item label="被调车的门店或同行">
      {{ record.sourceName }}
    </a-descriptions-item>
  </a-descriptions>
  <div class="section-item gray" style="padding: 0 20px" v-if="record.type == 1 || record.type == 2">
    <div class="section-item-content">
      <div class="flex page">
        <div class="page-title">结算信息</div>
        <div class="page-count" style="margin-bottom: 20px" v-if="record?.contractCarPurchaseEditVo?.useInstallment"
          >合计：<span class="num">{{ record?.contractCarPurchaseEditVo?.contractAmount || 0 }}</span> 元</div
        >
        <a-button v-if="record?.contractCarPurchaseEditVo?.useInstallment" class="btn" type="primary" size="mini" @click="openPayPlanFn"
          >查看付款计划</a-button
        >
      </div>
      <a-descriptions :size="size" :align="{ label: 'right' }" v-if="record?.contractCarPurchaseEditVo?.useInstallment == 1">
        <a-descriptions-item label="是否分期">{{ record?.contractCarPurchaseEditVo?.useInstallment ? '是' : '否' }}</a-descriptions-item>
        <a-descriptions-item label="首付">{{ record?.contractCarPurchaseEditVo?.initialAmount }}元</a-descriptions-item>
        <a-descriptions-item label="尾款">{{ record?.contractCarPurchaseEditVo?.balanceAmount }}元</a-descriptions-item>
        <a-descriptions-item label="期数">{{ record?.contractCarPurchaseEditVo?.lnstalmentNum }}期</a-descriptions-item>
        <a-descriptions-item label="每期金额">{{ record?.contractCarPurchaseEditVo?.amountPerPeriod }}元</a-descriptions-item>
        <a-descriptions-item label="第一期付款日">{{ record?.contractCarPurchaseEditVo?.lnstalmentFirstDate }}</a-descriptions-item>
      </a-descriptions>
      <a-descriptions :size="size" :align="{ label: 'right' }" v-else>
        <a-descriptions-item label="是否分期">{{ record?.contractCarPurchaseEditVo?.useInstallment ? '是' : '否' }}</a-descriptions-item>
        <a-descriptions-item label="借调费">{{ record?.contractCarPurchaseEditVo?.contractAmount }}</a-descriptions-item>
      </a-descriptions>
    </div>
    <div class="section-item-content" style="border-top: 1px solid #f2f3f5">
      <div class="flex page">
        <div class="page-title">合同信息</div>
      </div>
      <a-descriptions :size="size" :align="{ label: 'right' }">
        <a-descriptions-item label="合同编号">{{ record?.contractCarPurchaseEditVo?.contractNo }}</a-descriptions-item>
        <a-descriptions-item label="合同开始日期">{{ record?.contractCarPurchaseEditVo?.contractSignDate }}</a-descriptions-item>
        <a-descriptions-item label="合同结束日期">{{ record?.contractCarPurchaseEditVo?.contractEndDate }}</a-descriptions-item>
        <a-descriptions-item label="合同附件">
          <div v-if="record?.contractCarPurchaseEditVo?.contractFileUrl">
            <template v-if="getFileSuffix(record.contractCarPurchaseEditVo)">
              <a
                class="operate-list"
                @click="
                  filePreview(record?.contractCarPurchaseEditVo?.contractFileUrl, record?.contractCarPurchaseEditVo?.contractFileName)
                "
                >点击查看</a
              >
            </template>
            <a class="operate-list" v-else @click="onClick"> 点击查看 </a>
            <a-image-preview :src="record?.contractCarPurchaseEditVo?.contractFileUrl" v-model:visible="visible" />
          </div>
        </a-descriptions-item>
      </a-descriptions>
    </div>
    <!-- 查看付款计划 -->
    <car-payment-plan-modal ref="carPaymentPlanModalRef" />
  </div>
  <div class="section-item gray" v-else>
    <div class="section-item-content" style="border-top: 1px solid #f2f3f5">
      <div class="flex page">
        <div class="page-title">合同信息</div>
      </div>
      <a-descriptions :size="size" :align="{ label: 'right' }">
        <a-descriptions-item label="合同编号">{{ record?.contractCarPurchaseEditVo?.contractNo }}</a-descriptions-item>
        <a-descriptions-item label="合同附件">
          <div v-if="record?.contractCarPurchaseEditVo?.contractFileUrl">
            <template v-if="getFileSuffix(record.contractCarPurchaseEditVo)">
              <a
                class="operate-list"
                @click="
                  filePreview(record?.contractCarPurchaseEditVo?.contractFileUrl, record?.contractCarPurchaseEditVo?.contractFileName)
                "
                >点击查看</a
              >
            </template>
            <a class="operate-list" v-else @click="onClick"> 点击查看 </a>
            <a-image-preview :src="record?.contractCarPurchaseEditVo?.contractFileUrl" v-model:visible="visible" />
          </div>
        </a-descriptions-item>
      </a-descriptions>
    </div>
  </div>
</template>

<script setup>
  import { getCarTransferDetail, getEditFeeDetailByType2 } from '@/api/asset/carTransfer'
  import { findPayableListById } from '@/api/asset/car'
  import { onMounted, ref } from 'vue'
  import { useRoute } from 'vue-router'
  import carPaymentPlanModal from '../../../../car/car-manage/components/car-payment-plan-modal.vue'

  const route = useRoute()
  const size = ref('medium')
  const routePrams = route.params
  console.log(routePrams)
  const fieldList = ref([
    { label: '调入后车辆归属门店', prop: 'siteName' },
    { label: '归属车场', prop: 'siteCarPark' },
  ])

  const record = ref({
    feeList: [],
    contractCarPurchaseEditVo: {},
  })

  const carPaymentPlanModalRef = ref()
  const openPayPlanFn = () => {
    if (record.value.type == 2) {
      getEditFeeDetailByType2({ id: record.value.contractCarPurchaseEditVo.id }).then((res) => {
        let obj = Object.assign(res.result, { source: record.value.type })
        // 备注数据字段统一
        obj.payableList = obj.payableList.map((item) => {
          return Object.assign(item, { billRemark: item.remark })
        })
        carPaymentPlanModalRef.value.open(obj)
      })
    } else {
      findPayableListById({ id: record.value.contractCarPurchaseEditVo.id }).then((res) => {
        let obj = Object.assign(res.result, { source: record.value.type })
        carPaymentPlanModalRef.value.open(obj)
      })
    }
  }
  const getFileSuffix = (data) => {
    if (!data) return false
    let suffix = data.contractFileUrl.substring(data.contractFileUrl.lastIndexOf('.') + 1)
    if (suffix === 'pdf' || suffix === 'PDF' || suffix === 'doc' || suffix === 'docx') {
      return true
    }
    return false
  }
  const visible = ref(false)
  const onClick = () => {
    visible.value = true
  }
  // 文件预览
  const filePreview = (url, name) => {
    // pdf预览
    let fileName = name.split('.').pop().toLowerCase()
    window.open(url)
  }
  // 获取车辆详情
  const carInfo = ref({})
  const getDetail = (id) => {
    getCarTransferDetail({ id: id }).then((res) => {
      const result = res.result
      carInfo.value = { ...result, modelName: result.modelName }
      record.value = result
    })
  }

  onMounted(() => {
    const id = routePrams.id
    if (id) {
      getDetail(id)
    }
  })
</script>

<style lang="less" scoped>
  .car-msg {
    width: 100%;
    padding: 20px;
    background-color: #f7f8fa;
    .car-lic {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      div:nth-child(1) {
        color: #1d2129;
        font-size: 20px;
        font-weight: 600;
      }
      div:nth-child(2) {
        color: #e45800;
        font-size: 14px;
        font-weight: 400;
        padding: 4px 10px;
        background-color: #fff9e8;
        margin-left: 12px;
      }
    }
    .car-name {
      color: #1d2129;
      font-size: 14px;
      margin: 16px 0;
    }
    .car-other {
      color: #1d2129;
      font-size: 14px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: wrap;
      div {
        margin-right: 56px;
      }
    }
  }
  .all-count {
    width: 30%;
    margin-left: 27%;
    font-size: 14px;
    text-align: right;
    span {
      color: #165dff;
      font-size: 18px;
      font-weight: 600;
    }
  }
  .section-item + .section-item {
    margin-top: 16px;
  }
  .description-item {
    font-size: 14px;
    .description-item-label {
      color: var(--color-text-3);
    }
    .description-item-content {
      color: var(--color-text-1);
    }
  }
  .icon-tip {
    font-size: 16px;
    color: #165dffff;
    margin-left: 4px;
    vertical-align: middle;
  }
  .section-item {
    .section-item-header {
      color: #1d2129ff;
      font-weight: 500;
    }
    .section-item-content {
      padding: 20px 20px 0 20px;
    }
    .btn {
      margin-left: 16px;
    }
    &.gray {
      background-color: rgba(var(--gray-1), 0.5) !important;
      border-radius: 0px 0px 0px 0px;
      .section-item-content {
        padding: 20px 20px 12px 20px;
      }
    }
    .page-title {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 16px;
      color: #1d2129;
      line-height: 24px;
    }
    .page-count {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #4e5969;
      margin-left: 17px;
      line-height: 22px;
    }
    .num {
      color: #1890ff;
      font-family: PingFang SC, PingFang SC;
      font-weight: 600;
      font-size: 18px;
      color: #1890ff;
      line-height: 22px;
    }
    .contractFile {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #1890ff;
      line-height: 22px;
      text-align: left;
      font-style: normal;
      text-decoration-line: underline;
      text-transform: none;
    }
    .operate-list {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #1890ff;
      border-bottom: 1px solid #1890ff;
      cursor: pointer;
    }
  }
</style>
